<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="">
				<view class="slot-right">
					<u-search placeholder="请输入商品内容" style="width: 600rpx;" v-model="keyword" @blur="shijiao"
						@focus="jujiao" @search="searchCt" @custom="searchCt"></u-search>
				</view>
			</u-navbar>
		</view>
		<view class="history" v-if="isHistory" >
			<view class="top jsbc">
				<view class="title">
					历史搜索
				</view>
				<view class="delete" @click="deleteCt">
					<u-icon :name="'/static/icons/sc.png'" size="36"></u-icon>
				</view>
			</view>
			<view class="ct" v-if="searchList.length>0">
				<view class="items" v-for="(item,index) in searchList" :key="index" @click="hitCt(item)">
					{{item}}
				</view>
			</view>
			<view class="historyCt" v-else style=" width: 750rpx; text-align: center;">
				暂无记录~
			</view>
		</view>
		<!-- 商品数据 -->
		<view class="wrap container_br"  v-if="isShow" >
			<u-waterfall v-model="flowList" ref="uWaterfall1">
				<template v-slot:left="{leftList}">
					<view class="item" v-for="item in leftList" :key="item.id" @click="goGoodsDetail(item.id)">
						<view class="goods">
							<view class="img">
								<image :src="item.images_format[0]" mode="widthFix" style="width: 300rpx;"></image>
							</view>
							<view class="info">
								<view class="name">
									{{item.name}}
								</view>
								<view class="price_l flc">
									<view class="price">
										￥{{item.min_price}}
									</view>
									<view class="lprice ml2">
										￥{{item.line_price}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="item" v-for="item in rightList" :key="item.id" @click="goGoodsDetail(item.id)">
						<view class="goods">
							<view class="img">
								<image :src="item.images_format[0]" mode="widthFix" style="width: 300rpx;"></image>
							</view>
							<view class="info">
								<view class="name">
									{{item.name}}
								</view>
								<view class="price_l flc">
									<view class="price">
										￥{{item.min_price}}
									</view>
									<view class="lprice ml2">
										￥{{item.scribed_price}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore bg-color="rgb(255, 255, 255)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		</view>
		<view class="empty" style="width: 410rpx; margin: 60rpx auto; text-align: center; color: #666;" v-if="isEmpty" >
			<image src="../../static/img/empty.png" mode="widthFix" style="width: 410rpx;"></image>
			<span>暂无数据</span>
		</view>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>
<script>
	import {
		getGoodsList,
	} from '@/api/index.js'
	import {
		tiao
	} from '@/utils/common.js'
	import baseUrl from '@/config/config.js'
	export default {
		data() {
			return {
				// 显示加载更多
				loadStatus: 'loadmore',
				flowList: [],
				// 瀑布流数据
				goodList: [],
				page: 1,
				scrollTop: 0,
				keyword: "",
				searchList: [],
				statusBarHeight: uni.getStorageSync("statusBarHeight") || "",
				customBarHeight: uni.getStorageSync("customBarHeight") || "",
				isFoucus: false

			}
		},
		computed: {
			dynamicHeight() {
				return `calc(100vh - ${this.customBarHeight}px)`;
			},
			isHistory(){
				return !this.keyword&&!this.isFoucus
			},
			isShow(){
				return !this.isHistory&&this.goodList.length>0
			},
			isEmpty(){
				return !this.isHistory&&!this.isShow
			}
			


		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getHistory()
		},
		onReachBottom() {
			// 模拟数据加载
			if (this.loadStatus == 'loadmore') {
				if (this.showList) {
					this.searchCt()
				}
			}
		},
		methods: {

			searchCt() {
				this.loadStatus = 'loading';
				if(this.searchList.length>12){
					this.searchList.pop()
				}
				if(!this.searchList.includes(this.keyword)){
					this.searchList.unshift(this.keyword)
					uni.setStorageSync("historys",JSON.stringify(this.searchList))
				}
				getGoodsList({
					keyword: this.keyword,
					page: 1,
				}).then(res => {
					this.loadStatus = 'loadmore';
					let arr = []
					this.goodList = res.list
					if (res.last_page > res.page) {
						this.page++
					} else {
						this.loadStatus = "nomore"
					}
					if (res.list.length > 0) {
						this.addRandomData()
					}

				})
			},
			addRandomData() {

				for (let i = 0; i < this.goodList.length; i++) {
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.goodList[i]))
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall1.remove(id);
			},
			clear() {
				this.$refs.uWaterfall1.clear();
			},
			goNotice(index) {
				console.log(index);
			},
			goGoodsDetail(id) {
				tiao('/page/goodsDetail/goodsDetail?id=' + id)
			},
			goPage(url) {
				tiao(url)
			},
			shijiao() {
				this.isFoucus = false
			},
			jujiao() {
				this.isFoucus = true
			},
			hitCt(ct){
				this.keyword = ct
				this.searchCt()
			},
			deleteCt(){
				let that = this
				uni.showModal({
					title:"是否删除历史记录",
					confirmText:"删除",
					success(res) {
						if(res.confirm){
							uni.setStorageSync('historys',JSON.stringify([]))
							that.getHistory()
							
						}
					}
				})
			},
			getHistory(){
				let list = uni.getStorageSync('historys')
				
				if(list){
					this.searchList = JSON.parse(list)
				}else{
					this.searchList = []
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.item {
		width: 345rpx;
		min-height: 400rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		border-radius: 20rpx;

		.info {
			width: 345rpx;
			box-sizing: border-box;
			padding: 20rpx;
		}

		.name {
			width: 315rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.price {
			color: $u-type-error;
		}

		.lprice {
			text-decoration: line-through;
			color: #666;
		}
	}

	.history {
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
	}

	.ct {
		display: flex;
		flex-wrap: wrap;
	}

	.items {
		min-width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		background: #F2F2F2;
		border-radius: 25rpx;
		font-size: 24rpx;
		color: #333;
		padding: 0 12rpx;
		margin: 10rpx;
	}
</style>